<template>
  <Dialog ref="dialog" v-model="visible" title="线索登记情况-单位占比">
    <el-table
      :data="tableData"
      style="width: 100%"
      height="500"
      class="custom-table"
      header-row-class-name="custom-table-tr"
    >
      <el-table-column align="center" label="ID" width="80">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="线索编码">
        <template slot-scope="scope">
          {{ scope.row.serial }}
        </template>
      </el-table-column>
      <el-table-column label="被反映人">
        <template slot-scope="scope">
          {{ scope.row.respondent }}
        </template>
      </el-table-column>
      <el-table-column label="办理机关一级">
        <template slot-scope="scope">
          {{ ((scope.row.superviseOrg || {}).parent || {}).name }}
        </template>
      </el-table-column>
      <el-table-column label="办理机关二级">
        <template slot-scope="scope">
          {{ (scope.row.superviseOrg || {}).name }}
        </template>
      </el-table-column>
      <el-table-column label="受理时间">
        <template slot-scope="scope">
          {{ scope.row.receiptTime }}
        </template>
      </el-table-column>
      <el-table-column label="处置时间">
        <template slot-scope="scope">
          {{ scope.row.disposalTime }}
        </template>
      </el-table-column>
      <el-table-column label="处置方式">
        <template slot-scope="scope">
          {{ scope.row.disposalWay | disposalValueFilter }}
        </template>
      </el-table-column>
      <el-table-column label="办结时间">
        <template slot-scope="scope">
          {{ scope.row.closureTime }}
        </template>
      </el-table-column>
      <el-table-column label="办理结果">
        <template slot-scope="scope">
          {{ scope.row.conclusion | conclusionValueFilter }}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusClassFilter">{{
            scope.row.status | statusValueFilter
          }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="formInline.page"
      :page-size="formInline.size"
      :page-sizes="[10, 20, 30, 50]"
      class="pagination-el"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </Dialog>
</template>
<script>
import Dialog from "./Dialog.vue";
import { getClueListByParentIdAndDayBetween } from "@/api/clue";
export default {
  components: {
    Dialog,
  },
  filters: {
    statusClassFilter(status) {
      const statusMap = {
        0: "danger",
        1: "warning",
        2: "success",
      };
      return statusMap[status];
    },
    statusValueFilter(status) {
      const statusMap = {
        0: "未处理",
        1: "已处置",
        2: "已办结",
      };
      return statusMap[status];
    },
    disposalValueFilter(value) {
      const map = {
        1: '初步核实',
        2: '谈话函询',
        3: '了结',
        4: '暂存'
      }
      return map[value]
    },
    conclusionValueFilter(value) {
      const map = {
        1: '立案',
        2: '了结'
      }
      return map[value]
    }

  },
  data() {
    return {
      visible: false,
      tableData: [],
      total: 0,
      formInline: {
        page: 1,
        size: 10,
      },
    };
  },
  methods: {
    show(params) {
      console.log(params);
      Object.assign(this.formInline, params);
      this.visible = true;
      this.$refs.dialog.show();
      this.getData();
    },
    async getData() {
      const { data, total } = await getClueListByParentIdAndDayBetween(
        this.formInline
      );
      this.total = total;
      this.tableData = data;
    },
    handleSizeChange(val) {
      this.formInline.size = val
      this.getData();
    },
    handleCurrentChange(val) {
      this.formInline.page = val
      this.getData();
    },
  },
};
</script>
<style lang="scss">
.custom-table {
  background-color: #39606e;
}
.custom-table-tr th {
  background-color: #39606e !important;
  color: #ffffff !important;
  border-bottom: 1px skyblue solid !important;
}
.custom-table .el-table th.is-leaf .el-table td {
  border: 1px skyblue solid !important;
}
.custom-table .el-table th.is-leaf {
  border-bottom: 1px skyblue solid !important;
}
.custom-table .el-table td {
  border-bottom: 1px skyblue solid !important;
}
.custom-table .el-table th {
  background-color: #39606e !important;
}
.custom-table .el-table td {
  background-color: #39606e !important;
}
.custom-table .el-table__row {
  background-color: #39606e;
}
.custom-table .el-table tr {
  background-color: #39606e;
}
.custom-table .el-table {
  background-color: #39606e;
}
.custom-table .el-table__body-wrapper {
  background-color: #39606e;
}
.custom-table .el-table th {
  background-color: #39606e;
}
.custom-table .el-table th {
  color: #afecff;
  border-bottom: 1px skyblue solid !important;
}
.custom-table .el-table__body td{
  color: #afecff;
  border-bottom: 1px skyblue solid !important;
}
</style>
<style lang="scss" scoped>
.btn {
  color: #47e6de;
  cursor: pointer;
}

.search {
  border: 1px solid #47e6de;
  color: #47e6de;
  background-color: #1d5354;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-content-title {
  padding-bottom: 20px;

  span {
    font-size: 14px;
    color: #fff;
    font-family: PingFang SC;

    .num {
      color: #44dbd4;
      font-weight: 600;
    }
  }
}

.el-form {
  display: flex;
}

.el-form-item {
  width: 244px !important;
}

#abs-enterprises-chart {
  height: 170px;
  width: 100%;
}

.pagination-el {
  margin-top: 10px;

  ::v-deep .el-input__inner {
    background-color: transparent !important;
    color: #fff !important;
  }
}
</style>
